<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--<link rel="stylesheet" href="../css/base/jquery.ui.all.css">-->
    <link rel="stylesheet" type="text/css" href="../css/generic.css">
    <link rel="stylesheet" type="text/css" href="../css/nv.d3.min.css">
    <link rel="stylesheet" type="text/css" href="../media/css/demos.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <!--<link rel="stylesheet" type="text/css" href="../css/sample.css" >-->
    <link rel="stylesheet" type="text/css" href="../css/dd.css" >
    <link rel="stylesheet" type="text/css" href="../css/flags.css" >
    <link rel="stylesheet" type="text/css" href="../css/skin2.css" >

    <script src="../js/snap.svg-min.js"></script>
    <script src="../js/snap.svg.js"></script>
    <script src="../js/Chart.js"></script>
    <script src="../js/drag.js"></script>
    <script src="../js/getScrollOffsets.js"></script>
    <!--<script src="../js/jquery-2.1.4.min.js"></script>-->
    <script src="../js/nv.d3.min.js"></script>
    <script src="../js/d3.min.js"></script>
    <script src="../js/d3-downloadable.js"></script>
    <!--<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>-->
    <script src="../js/data.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.jeditable.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/KeyTable.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery.dd.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/color.js"></script>

    <title>测试</title>
</head>
<body>

<div id="topdiv">
    <button onclick="func()" class="button">加载</button>
    <input type="file" name="fileupload" id="fileuploadbtn" onchange="fileUploadReadText(this.files)">
    <button onclick="draw()" class="button">绘制</button>
    <button onclick="download()" class="button">保存</button>
    <button id="downloadlink" href="">另存为</button>
    <button onclick="panandsacle()" class="button">漫游</button>
    <button onclick="scaleall()" class="button">全图</button>
    <button onclick="edit()" class="button">编辑</button>
    <button onclick="refresh()" class="button">更新</button>
    <select id="colorband" style="width:250px;">
        <option value="" data-description="选择色带"></option>
        <option value="amex" data-image="../resources/band/1BB09X04.png" data-description="123456" data-title="88888"></option>
        <option value="Discover" data-image="../resources/band/1BB09X04.png" data-description="123456"></option>
        <!--<option value="Mastercard" data-image="../resources/band3.png" data-description="123456"></option>-->
        <!--<option value="cash" data-image="../resources/band1.png" data-description="123456"></option>-->
        <!--<option value="Visa" data-image="../resources/band2.png" data-description="123456"></option>-->
        <!--<option value="Paypal" data-image="../resources/band3.png" data-description="123456"></option>-->
    </select>
</div>
<div style="background-color: #f6f6f6;">
    <ul class="tabs">
        <li class="active"><a href="#tab_map">地图</a></li>
        <li><a href="#tab_data">数据</a></li>
    </ul>
    <br>
    <div class="tab_container">
        <div id="tab_map" class="tab_content" style="display: block; ">
            <div id="layer_control">
                <ul>
                    <li>居民地</li>
                    <li>道路</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                    <li>植被</li>
                </ul>
            </div>
            <div id="svg_div">
                <!--<svg id="svgroot" width="1585" height="1050" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">-->
                <!--</svg>-->
            </div>
        </div>
        <div id="tab_data" class="tab_content" style="display: none; ">
            <p/><p/><p/>
            <input class="search" placeholder="Search" id="searchText"/>
            <button class="button" data-sort="name" id="searchButton" onclick="search()">
                搜索
            </button>
            <button class="button" data-sort="name" id="deleteButton" onclick="reset()">
                还原
            </button>
            <table id="datatable" class="display KeyTable">
                    <thead>
                    </thead>
                    <tbody>
                    </tbody>
            </table>
            </div>
    </div>
</div>

<script>
    var dataload;
    var globalscale=1.0;
    var iniWidth=1585;
    var iniHeight=1050;
    var iconSelect;
    $(document).ready(function() {
        var colorselect=$("#colorband");
        for(i=0;i<10;i++)
        {
            colorselect.append('<option value="Discover" data-image="../resources/svg/'+colormap[i]+'.png" data-description="'+colormap[i]+'"></option>');
        }
        //Default Action
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active content
            return false;
        });
//        $("#ver").html(msBeautify.version.msDropdown);
        $("select").msDropdown({roundedBorder:false});
    });

    function refreshcolorselect()
    {
        var colorselect=$("#colorband");
        for(i=0;i<10;i++)
        {
            colorselect.append('<option value="Discover" data-image="../resources/svg/'+colormap[i]+'.svg" data-description="'+colormap[i]+'"></option>');
        }
        $("select").msDropdown({roundedBorder:false});
    }
    function refresh()
    {
        var rows=document.getElementById("datatable").rows;
        datanew=[];
        for(i=0;i<rows.length;i++)
        {
            var cells=rows[i].cells;
            var one=[];
            for(j=0;j<cells.length;j++)
            {
                var trans=parseFloat(cells[j].innerHTML);
                if(isNaN(trans))
                    one.push(cells[j].innerHTML);
                else
                    one.push(trans);
            }
            datanew.push(one);
        }
        dataload=datanew;
        Snap("#graphicgen").remove();
    }

    function reset()
    {
        var rows=$("#datatable tbody tr");
        for(i=0;i<rows.length;i++)
        {
            if(i%2==0)
                rows[i].setAttribute("class","odd_gradeA");
            else
                rows[i].setAttribute("class","odd_gradeC");
            Snap("#Pie"+(i+1)).attr({visibility:"visible"});
        }
    }

    function search()
    {
        var searchString=$("#searchText").val();
        if(!searchString.match(/.+\W+.+/))
        {
            alert("查询条件非法！");
            return;
        }
        var chars=searchString.match(/\W+/)[0];
        var index=searchString.indexOf(chars);
        var sclass=searchString.substring(0,index);
        var snum=searchString.substring(index+chars.length);
        if(snum.match(/\d+/))
            snum=parseFloat(snum);
        var rows=$("#datatable tbody td."+sclass);
        var lines=$("#datatable tbody td."+sclass).parent();
//        var searchdata=[];
//        rows.forEach(function(value){searchdata.append(value.innerHTML)});
        for(one=0;one<rows.length;one++)
        {
            switch(chars)
            {
                case "==":
                    if(rows[one].innerHTML==snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case ">":
                    if(rows[one].innerHTML>snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case "<":
                    if(rows[one].innerHTML<snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case ">=":
                    if(rows[one].innerHTML>=snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
                case "<=":
                    if(rows[one].innerHTML<=snum)
                    {
                        lines.get(one).setAttribute("class","odd_gradeX");
                        Snap("#Pie"+(one+1)).attr({visibility:"visible"});
                    }
                    else{
                        Snap("#Pie"+(one+1)).attr({visibility:"hidden"});
                    }
                    break;
            }
        }
    }

    function fileUploadReadText(f)
    {
        if(typeof FileReader=='undefined')
        {
            alert("浏览器不支持！");
        }
        var tempFile=f[0];
        var reader=new FileReader();
        reader.readAsText(tempFile,"GBK");
        reader.onload=function(e)
        {
            dataload=readData(e.target.result,false);
            if(dataload.length>=1)
            {
                var headstring='<tr class="ui-widget-header ">';
                for(i=0;i<dataload[0].length;i++)
                headstring=headstring+'<th class='+dataload[0][i]+'>'+dataload[0][i]+'</th>';
                headstring+="</tr>";
                $("#datatable thead").append(headstring);
                for(i=1;i<dataload.length;i++)
                {
                    onestring="";
                    if(i%2==0)
                        onestring='<tr class="odd_gradeA">';
                    else onestring='<tr class="odd_gradeC">';
                    for(j=0;j<dataload[i].length;j++)
                        onestring=onestring+"<td class="+dataload[0][j]+">"+dataload[i][j]+"</td>";
                    $("#datatable tbody").append(onestring);
                }
            }
            var keys = new KeyTable( {
                "table": document.getElementById('datatable')
            } );

            /* Apply a return key event to each cell in the table */
            $('#datatable tbody td').each( function () {
                keys.event.action( this, function (nCell) {
                    /* Block KeyTable from performing any events while jEditable is in edit mode */
                    keys.block = true;

                    /* Initialise the Editable instance for this table */
                    $(nCell).editable( function (sVal) {
                        /* Submit function (local only) - unblock KeyTable */
                        keys.block = false;
                        return sVal;
                    }, {
                        "onblur": 'submit',
                        "onreset": function(){
                            /* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
                             * it will 'esc' KeyTable as well
                             */
                            setTimeout( function () {keys.block = false;}, 0);
                        }
                    } );
                    /* Dispatch click event to go into edit mode - Saf 4 needs a timeout... */
                    setTimeout( function () { $(nCell).click(); }, 0 );
                } );
            } );
        }
    }

    function download()
    {
        a=document.getElementById("downloadlink");
        var win=window.open();
        win.document.write(Snap("#globalsvg").paper.toString());
        //a.setAttribute('href','data:application/svg;charset=utf-8,'+Snap("#globalsvg").paper.toString());
    }

    function draw()
    {
        color=[Snap.rgb(51,204,51),Snap.rgb(255,204,0),Snap.rgb(204,102,255),Snap.rgb(255,255,0),Snap.rgb(0,255,255),Snap.rgb(255,0,255)];
        labels=["第一产业","第二产业","第三产业","","",""];
        var legend=Legend("#globalsvg","legend_pie_1",800,800,3500,3500,800,color,labels,"生产总量",dataload[dataload.length-1]);
        var group = Snap("#svggroup").g();
        group.attr({id:"graphicgen"});
        var pieScale_max=0;
        var pieScale=new Array();
        for(i=1;i<dataload.length;i++)
        {
            //by weiyihao  三生产总值大小
            pieScale[i]=dataload[i][2]+dataload[i][3]+dataload[i][4];
            if(pieScale[i]>pieScale_max)
            {
                pieScale_max=pieScale[i];
            }
        }
        for(i=1;i<dataload.length;i++)
        {
            var code=dataload[i][1];

            var code_s=code.toString();
            if(code<10)
             code_s="0"+code;
            var e=document.getElementById("Prov_P"+code_s);
            var X=parseInt(e.getAttribute("cx"));
            var Y=parseInt(e.getAttribute("cy"));
            var graph=pieChart("#globalsvg","Pie"+i,dataload[i],300,300,X,Y,parseInt(pieScale[i]/pieScale_max*600),color);
            graph.drag();
            group.add(graph);
        }
        //legend.drag();
    }

    function scaleout()
    {
        var svg=document.getElementById("globalsvg");
        var svg2=Snap("#svgroot");
        globalscale-=0.1;
        svg2.attr({width:""+iniWidth*globalscale,height:""+iniHeight*globalscale});
        var swidth=svg.getAttribute("width");
        var sheight=svg.getAttribute("height");
        var width=parseInt(swidth.substr(0,swidth.length-1));
        var height=parseInt(sheight.substr(0,swidth.length-1));
        if(width<=10||height<=10)
        {
            alert("已缩放至最小比例");
            return;
        }
        width=width-10;
        height=height-10;
        svg.setAttribute("width",width+"%");
        svg.setAttribute("height",height+"%");
    }

    function scalein()
    {
        var svg=document.getElementById("globalsvg");
        var svg2=Snap("#svgroot");
        globalscale+=0.1;
        svg2.attr({width:""+iniWidth*globalscale,height:""+iniHeight*globalscale});
        var swidth=svg.getAttribute("width");
        var sheight=svg.getAttribute("height");
        var width=parseInt(swidth.substr(0,swidth.length-1));
        var height=parseInt(sheight.substr(0,swidth.length-1));
        if(width>=200||height>=200)
        {
            alert("已放大至最大比例");
            return;
        }
        width=width+10;
        height=height+10;
        svg.setAttribute("width",width+"%");
        svg.setAttribute("height",height+"%");

    }

    function panandsacle()
    {
        var x = d3.scale.linear()
                .domain([0, 1500])
                .range([0, 1500]);
        var y = d3.scale.linear()
                .domain([0, 1500])
                .range([0, 1500]);

        var svg = d3.select("#globalsvg");
        var zoom = d3.behavior.zoom()		//创建一个缩放行为
                .x(x)
                .y(y)
                .scaleExtent([0.5, 20])	//设置缩放的范围
                .on("zoom", function(d){
                    d3.select(this).attr("transform",
                            "translate(" + d3.event.translate + ")" +	//平移量
                            "scale(" + d3.event.scale + ")");	//缩放量
                });
        var g=svg.select("#svggroup");
        g.call(zoom);
    }

    function scaleall()
    {
        d3.select("#svggroup").attr("transform",
                "translate(0,0)" +	//平移量
                "scale(1)");	//缩放量
    }

    function edit()
    {
        var svg = d3.select("#globalsvg");
        var g=svg.select("#svggroup");
        var zoom = d3.behavior.zoom()		//创建一个缩放行为
                .on("zoom", function(d){
                });
        g.call(zoom);
    }
    function func()
    {
        Snap.load("../resources/svg/test2.svg", function(svg) {
            this.appendChild(svg.node);
        }, document.getElementById("svg_div"));
        refreshcolorselect();
//        var dl = downloadable().filename('chart');

//        var s=pieChart("#svgroot","pie1",[12,35,45,12],300,300,200,200,150,['red','blue','yellow','green'],['1','2','3','4'],300,100);
    }
</script>
</body>
</html>